.content{
	width:640px;
	height: 640px;
	margin: 100px auto;
	position: relative;   /* 父级开启相对定位 */
}
.btn{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
	z-index: 2;      /* z轴高2，z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */	
}

.btn button{
	background: none;   /* 按钮的默认样式清除 */
	border: none;
	background-size: 100% 100%;
	
	cursor: pointer;/* cursor 属性规定要显示的光标的类型（形状）,该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */
	outline: none;      /* 点上去后有一个下划线 */	
	position: absolute;
	left: 50%;   /* 这里没有居中是因为 left top是指定的左上那个点，并非整个div */
	top: 50%;
}
.startBtn button{
	width: 200px;
	height: 80px;
	background-image: url(../images/startGame.png);
	margin-top: -40px;
	margin-left: -100px;
}
.pauseBtn{
	display: none;
}
.pauseBtn button{
	width: 70px;
	height: 70px;
	background-image: url(../images/start.png);
	margin-top: -35px;
	margin-left: -35px;
}
#snakeWrap{
	width: 600px;
	height: 600px;
	background-color: #225675;
	border: 20px solid #7dd9ff;
	position: relative;
}

.snakeHead{
	background-image: url(../images/snake.png);
	background-size: cover; 	/*cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。相当于100% 100% */
}
.snakeBody{
	background-color: #9ddbb1;
    border-radius:50%;     /* 该属性允许您为元素添加圆角边框,值用来调节圆角的程度 */
}
.food{
	background-image: url(../images/food.png);
	background-size: cover; 
}